<template>
	<view class="pages">
		<!-- :heightTop="heightTop" -->
		<headerMain
		:headerBg="'linear-gradient(to right, #2fbe9c , #79c550)'"
		:headerTitle="'用户端'" :titleColor="'#ffffff'"
		@goNext="goNext"
		/>
		
		<view class="content">
			<view class="search">
				<view class="search-box">
					<img src="@/static/type/search.png" alt="" />
					<input type="text" v-model="searchVal" placeholder="请输入关键字" />
					<view class="clear clear--active" v-if="searchVal != ''" @click="clearData('searchVal')">
						<image src="@/static/public/icon-clear.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			
			<view class="">
				<!-- <uni-section title="滑动视图" type="line" padding> -->
					<!-- 因为swiper特性的关系，请指定swiper的高度 ，swiper的高度并不会被内容撑开-->
					<swiper class="swiper" :indicator-dots="true">
						<swiper-item>
							<uni-grid :column="3" :highlight="true" @change="change">
								<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
									<view class="grid">
										<image :src="item.url" class="image" mode="aspectFill" />
										<text class="text">{{ item.text }}</text>
									</view>
								</uni-grid-item>
							</uni-grid>
							<!-- <view class="" v-for="(item, index) in list" :index="index" :key="index">								<view class="grid">									<image :src="item.url" class="image" mode="aspectFill" />									<text class="text">{{ item.text }}</text>								</view>							</view> -->
						</swiper-item>
						<swiper-item>
							<uni-grid :column="3" :highlight="true" @change="change">
								<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
									<view class="grid">
										<image :src="item.url" class="image" mode="aspectFill" />
										<text class="text">{{ item.text }}</text>
									</view>
								</uni-grid-item>
							</uni-grid>
						</swiper-item>
						<swiper-item>
							<uni-grid :column="3" :highlight="true" @change="change">
								<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
									<view class="grid">
										<image :src="item.url" class="image" mode="aspectFill" />
										<text class="text">{{ item.text }}</text>
									</view>
								</uni-grid-item>
							</uni-grid>
						</swiper-item>
					</swiper>
				<!-- </uni-section> -->
				
				<!-- <uni-section title="文字滚动" subTitle="使用 scrollable 属性使通告滚动,此时 single 属性将失效,始终单行显示" type="line"> -->
					<uni-notice-bar show-icon scrollable color="#64c1ad" background-color="#e9f4f2"
						text="uni-app 版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。" />
				<!-- </uni-section> -->
			</view>
			
			<view class="shopList">
				<view class="shopList-list">
					<view class="shopList-list__item" @tap="goTo()">
						<view class="imgBox">
							<image src="@/static/logo.png" mode=""></image>
						</view>
						<view class="newsBox">
							<view class="nameBox">
								<text>自营</text>
								XXXXXXXXXXXXXXXXXXXXX
							</view>
							<view class="typeBox">
								<text class="green">女装</text>
								<text class="green">臻选</text>
								<text class="green">热款</text>
							</view>
							<view class="tipsBox">
								评分 <text>4.99分</text>
								| 订单 <text>10万单</text>
							</view>
							<view class="addressBox">
								<view class="addr">北华侨城天鹅堡</view>
								<view class="addr">1.5km</view>
							</view>
							<view class="timeBox">
								营业时间 09:00-19:00
							</view>
						</view>
					</view>
				</view>
			</view>
			
			
		</view>
		
		<!-- 底部导航 -->
		<tabbar :current="1" />
	</view>
</template>
<script>
	export default {
		components: {
		}, 
		data() {
			return { 
				heightTop: 0,
				searchVal: '',
				list: [{
					url: '/static/logo.png',
					text: 'Grid 1',
					badge: '0',
					type: "primary"
				},
				{
					url: '/static/logo.png',
					text: 'Grid 2',
					badge: '1',
					type: "success"
				},
				{
					url: '/static/logo.png',
					text: 'Grid 3',
					badge: '99',
					type: "warning"
				},
				{
					url: '/static/logo.png',
					text: 'Grid 4',
					badge: '2',
					type: "error"
				},
				{
					url: '/static/logo.png',
					text: 'Grid 5'
				},
				{
					url: '/static/logo.png',
					text: 'Grid 6'
				},
				{
					url: '/static/logo.png',
					text: 'Grid 7'
				},
				{
					url: '/static/logo.png',
					text: 'Grid 8'
				},
				{
					url: '/static/logo.png',
					text: 'Grid 9'
				}
			]
			}
		},
		onPageScroll(e) {
			this.heightTop = e.scrollTop;
		},
		onLoad() {
		},
		onShow() {
			// this.init();
		},
		methods: {
			init(){
			},
			
			goTo(){
				uni.navigateTo({
					url: '/pages/type/type'
				})
			},
			
			change(e) {
				let {
					index
				} = e.detail
				this.list[index].badge && this.list[index].badge++

				// uni.showToast({
				// 	title: `点击第${index+1}个宫格`,
				// 	icon: 'none'
				// })
				uni.navigateTo({
					url: '/pages/type/type'
				})
			},
			
			clearData(keyName) {
				for (var key in this.$data) {
					if (key == keyName) {
						this.$data[key] = '';
					}
				}
			},
		}
	}
</script>


<style lang="scss" scoped>
	.content{
		.search{
			margin: 20rpx;
			background: #fff;
			border-radius: 8rpx;
			padding: 20rpx;
			&-box{
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;
				position: relative;
				img{
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}
				input{
					font-size: 28rpx;
					color: #000000;
					flex: 1;
				}
				.clear{
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-end;
					position: absolute;
					top: 0;bottom: 0;
					right: 0rpx;
					image{
						width: 30rpx;
					}
				}
			}
		}
	
		.swiper{
			height: 500rpx;
			margin-bottom: 20rpx;
			.grid{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: flex-start;
				// width: 33.33%;
				height: 100%;
				padding-top: 10rpx;
				.image{
					width: 150rpx;
					height: 150rpx;
					margin: 0 auto;
				}
				.text{
					font-size: 28rpx;
					color: #000000;
					text-align: center;
					margin: 10rpx auto 0;
				}
			}
		}
		
		.shopList{
			&-list{
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: flex-start;
				margin: 20rpx;
				background: #ffffff;
				border-radius: 16rpx;
				&__item{
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-start;
					padding: 20rpx;
					width: calc(100% - 40rpx);
					.imgBox{
						width: 200rpx;
						height: 200rpx;
						margin-right: 20rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.newsBox{
						display: flex;
						flex-direction: column;
						justify-content: flex-start;
						align-items: flex-start;
						width: calc(100% - 200rpx - 20rpx);
					}
					.nameBox{
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;
						font-size: 30rpx;
						font-weight: bold;
						text{
							font-size: 24rpx;
							padding: 4rpx 8rpx;
							color: #ffffff;
							background: #64c1ad;
							border-radius: 4rpx;
							margin-right: 8rpx;
						}
					}
					.typeBox{
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: flex-start;
						margin: 10rpx 0;
						text{
							font-size: 24rpx;
							padding: 4rpx 8rpx;
							margin-right: 10rpx;
						}
						.green{
							border: 1px solid #16baaa;
							color: #16baaa;
						}
					}
					.tipsBox{
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: flex-start;
						font-size: 24rpx;
						font-weight: bold;
						text{
							font-size: 24rpx;
							color: #64c1ad;
							margin: 0 10rpx;
						}
					}
					.addressBox{
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;
						margin: 10rpx 0;
						width: 100%;
						.addr{
							font-size: 24rpx;
							color: #000000;
						}
					}
					.timeBox{
						font-size: 22rpx;
						color: #000000;
					}
				}
			}
		}
	
	}
</style>